<template>
  <div class="tablegu">
    <!-- type属性改变选项卡的类型 -->
    <!-- tabPosition设置标签的方向,默认是top，有left，right，bottom，top -->
    <!-- 可以通过slot来实现自定义标签页标题，默认标题是写在label里面 -->
    <el-tabs
      v-model="activeName"
      tab-position="top"
      @tab-click="handleClick"
      type="border-card"
    >
      <el-tab-pane name="first">
        <span slot="label">
          <i class="el-icon-setting"></i>
          <span>用户管理</span>
        </span>
        <div>用户管理内容</div>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>
      <el-tab-pane label="图书管理" name="three">图书管理内容</el-tab-pane>
    </el-tabs>
    <div class="a-table">
      <div>
        <div @click="listhandle1">消息提醒</div>
        <div >
          <div @click="listhandle2" v-show="spjk">视频监控</div>
          <div v-show="serch" @click="serchhandle">搜索</div>
          <div v-show="serchimput">
            <input type="text"  />
          </div>
        </div>

        <div>...</div>
      </div>
      <div>
        <ul v-show="listshow">
          <li v-for="item in list" :key="item.id">{{ item.listname }}</li>
        </ul>
        <ul v-show="listSshow">
          <li v-for="item in listS" :key="item.id">{{ item.listSname }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tabs",
  methods: {
    handleClick(tab, event) {
      console.log(tab);
      console.log(event);
    },
  },
  data() {
    return {
      activeName: "second",
      list: [
        {
          id: 1,
          listname:
            "【到期提醒】奎文区摄像头事件     2021-06-23 【过期提醒】奎文区摄像头事件     2021-06-20 【延期",
        },
        {
          id: 2,
          listname:
            "【到期提醒】奎文区摄像头事件     2021-06-23 【过期提醒】奎文区摄像头事件     2021-06-20 【延期",
        },
        {
          id: 3,
          listname:
            "【到期提醒】奎文区摄像头事件     2021-06-23 【过期提醒】奎文区摄像头事件     2021-06-20 【延期",
        },
        {
          id: 4,
          listname:
            "【到期提醒】奎文区摄像头事件     2021-06-23 【过期提醒】奎文区摄像头事件     2021-06-20 【延期",
        },
        {
          id: 5,
          listname:
            "【到期提醒】奎文区摄像头事件     2021-06-23 【过期提醒】奎文区摄像头事件     2021-06-20 【延期",
        },
        {
          id: 6,
          listname:
            "【到期提醒】奎文区摄像头事件     2021-06-23 【过期提醒】奎文区摄像头事件     2021-06-20 【延期",
        },
        {
          id: 7,
          listname:
            "【到期提醒】奎文区摄像头事件     2021-06-23 【过期提醒】奎文区摄像头事件     2021-06-20 【延期",
        },
        {
          id: 8,
          listname:
            "【到期提醒】奎文区摄像头事件     2021-06-23 【过期提醒】奎文区摄像头事件     2021-06-20 【延期",
        },
        {
          id: 9,
          listname:
            "【到期提醒】奎文区摄像头事件     2021-06-23 【过期提醒】奎文区摄像头事件     2021-06-20 【延期",
        },
      ],
      listS: [
        {
          id: 1,
          listSname:
            "【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊",
        },
        {
          id: 2,
          listSname:
            "【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊",
        },
        {
          id: 3,
          listSname:
            "【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊",
        },
        {
          id: 4,
          listSname:
            "【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊",
        },
        {
          id: 5,
          listSname:
            "【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊",
        },
        {
          id: 6,
          listSname:
            "【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊",
        },
        {
          id: 7,
          listSname:
            "【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊",
        },
        {
          id: 8,
          listSname:
            "【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊",
        },
        {
          id: 9,
          listSname:
            "【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊市奎文区】新城街道北海路福寿街路 【潍坊",
        },
      ],
      listshow: true,
      listSshow: "",
      spjk: "显示",
      serch: "",
      serchimput: "", //搜索框默认隐藏
    };
  },
  methods: {
    listhandle1() {
      this.listSshow = false;

      this.listshow = true;
      this.serchimput = false;
      this.serch = false;
      this.spjk = true;
    },
    listhandle2() {
      this.listSshow = true;
      this.listshow = false;
      this.serch = true;
    },
    serchhandle() {
      this.spjk = false;
      this.serch = false;
      this.serchimput = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.tablegu {
  display: flex;
}
.a-table {
  width: 400px;
  height: 472px;
  display: flex;
  flex-direction: column;
  > div:nth-of-type(1) {
    flex: 0.064;
    display: flex;
    // padding-top: 50px;
    justify-content: space-around;
    font-size: 17px;
    color: #212245;
    >div:nth-of-type(1){
      flex: 3;
    }
    > div:nth-of-type(2) {
      flex: 4;
      display: flex;
      justify-content: space-between;
    }
        >div:nth-of-type(3){
      flex: 3;
    }
  }
  > div:nth-of-type(2) {
    flex: 0.936;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    > ul {
      padding-left: 100px;
      white-space: nowrap;
      overflow: hidden;

      // list-style: none;

      > li {
      }
    }
  }

}
</style>